<template>
  <div class="bg-[#fff] pt-[1px]">
    <div class="flex justify-between align-center mx-[8px]">
      <el-form inline ref="form" :model="search">
        <el-form-item prop="title">
          <el-input v-model="search.title" placeholder="标题" />
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            size="default"
            v-model="search.time"
            type="date"
            placeholder="通知时间"
          />
        </el-form-item>
        <el-form-item prop="state">
          <el-select
            size="default"
            v-model="search.state"
            placeholder="状态"
            filterable
          >
            <el-option v-for="item in 3" :value="item">{{ item }}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button class="ready-btn">
          <span class="main-iconfont icon-clear"></span>批量标记为已读
        </el-button>
      </div>
    </div>

    <div
      v-for="item in 4"
      :key="item"
      class="flex p-[16px] mx-[8px] rounded-[8px] bg-[#fff] shadow-[0_1px_12px_-8px_#3487FF] mb-[16px]"
    >
      <div
        class="flex align-center justify-center flex-[0_0_52px] text-[14px] text-[#999] leading-[20px] border-r-[1px] border-[#EFF3FE] overflow-hidden"
      >
        12:30 03/22
      </div>
      <div class="ml-[16px] flex justify-between shrink-0 flex-1">
        <div>
          <div class="flex items-center text-[14px] text-[#333] leading-[20px]">
            <i
              class="main-iconfont icon-gonggao bg-gradient-to-br from-[#BE95FF] to-[#8EACFF] rounded-[50%] text-[#fff] w-[16px] h-[16px] flex items-center mr-[4px]"
            ></i>
            <p
              class="relative ml-[2px] after:content-[' ']"
              :class="{
                'after:h-[6px] after:w-[6px] after:absolute after:top-[-3px] after:right-[-6px] after:bg-[red] after:rounded-[50%]': true,
              }"
            >
              标题标题标题标题标题标题标题标题标题标题标题标题
            </p>
          </div>
          <div class="text-[14px] text-[#333] leading-[24px] mt-[8px]">
            备注备注备注备注备注备注备注备注备注
          </div>
        </div>
        <div class="flex flex-col items-end justify-between shrink-0">
          <p class="text-[12px] text-[#999] leading-[17px]">ID:64872</p>
          <div class="flex items-center">
            <div
              class="text-[14px] leading-[20px] text-[#3487FF] cursor-pointer ml-[16px]"
              v-for="item in operateConfig"
              :key="item.label"
            >
              <span>{{ item.label }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const form = ref()
const operateConfig = [
  { label: '详情', value: 'detail', icon: '' },
  { label: '标记为已读', value: 'read' },
]

const search = reactive({})

const handleReset = () => {
  form.value.resetFields()
}

const handleSearch = () => {
  form.value.validate(valid => {
    if (!valid) return
    // console.warn(search)
  })
}
</script>

<style lang="scss" scoped>
.ready-btn {
  color: #3487ff;
  border: 1px solid #3487ff;
}
</style>
